import { reactive, toRefs } from 'vue'
// import { reactive } from 'vue'

const ListHooks = () => {
  // const list = ref([])
  // const addItem = (e) => {
  //   list.value.push({
  //     id: list.value.length,
  //     title: e.title.value,
  //     isCheck: false
  //   }
  //   )
  // }
  // const changeStatus = (e) => {
  //   const id = e.id
  //   list.value.forEach(item => {
  //     if (item.id === id) {
  //       item.isCheck = !item.isCheck
  //     }
  //   })
  // }
  // const delItem = (e) => {
  //   const id = e.id
  //   const index = list.value.findIndex(item => {
  //     return item.id === id
  //   })
  //   list.value.splice(index, 1)
  // }
  const data = reactive({
    list: [],
    addItem: (e) => {
      data.list.push({
        id: data.list.length,
        title: e.title.value,
        isCheck: false
      })
    },
    changeStatus: (e) => {
      const id = e.id
      data.list.forEach(item => {
        if (item.id === id) {
          item.isCheck = !item.isCheck
        }
      })
    },
    delItem: (e) => {
      const id = e.id
      const index = data.list.findIndex(item => {
        return item.id === id
      })
      data.list.splice(index, 1)
    }
  })

  // 此时需要访问.value,因为此时值为一个Ref
  return {
    ...toRefs(data)
  }

  // 访问时会不能加.value,因为此时值为一个Proxy
  // return {
  //   ...data
  // }

  // 此时值不能加.value, 因为此时值为一个Proxy
  // return data

  // 此时值一定是一个Ref
  // return {
  //   list,
  //   addItem,
  //   changeStatus,
  //   delItem
  // }

  // Ref对象才能使用也必须使用.value获取值
  // Proxy对象可以直接获取值
  // 此时需要一个规范,将Proxy全部转为Ref
}

export default ListHooks
